<template>
	<view class="buildings">
		<!-- buildings -->

		<view class="buildings_list" v-for="(item,index) in floors" :key="item.title">
			<view class="title">{{item.title}}</view>
			<view class="subTitle">{{item.detail}}</view>
			<view class="buildings_imgs">
				<view class="buildings_img" v-for="(items,indexs) in item.pickupAddressImages" :key="item" @click="previewImageFn(item.pickupAddressImages,indexs)">
					<image :src="items" ></image>
					<!-- mode="widthFix" -->
				</view>
				<!-- <view class="buildings_img" v-for="(item,index) in item.pickupAddressImages" :key="item" @click="previewImageFn(item.pickupAddressImages,index)">
					<image :src="item"  mode="widthFix"></image>
				</view> -->
			</view>
		</view>

	</view>
</template>

<script>
	import {
		queryPickupAddressImagesByBuildingName
	} from "@/request/api.js";
	import util from "@/utils/util.js"
	export default {
		data() {
			return {
				floors: [],
				buildingName: '',
			};
		},
		onLoad(options) {
			this.buildingName = options.name;
			this.queryPickupAddressImagesByBuildingNameFn();
		},
		onShow() {

		},
		methods: {

			// 根据楼栋名称获取取餐点照片列表
			async queryPickupAddressImagesByBuildingNameFn() {
				// 获取选择的地址
				let datas = util.getStorePage();
				let currAddress = datas['currAddress'];
				let res = await queryPickupAddressImagesByBuildingName({
					method: "GET",
					data: {
						siteId: currAddress ? currAddress.addressId : '',
						buildingName: this.buildingName
					}
				})
				// "floors"
				if (res.code == 200) {
					this.floors = res.result.floors;
				}
			},
			// 预览图片
			previewImageFn(urls,current){
				uni.previewImage({
					urls,
					loop:true,
					current
					// longPressActions: {
					// 	itemList: ['发送给朋友', '保存图片', '收藏'],
					// 	success: function(data) {
					// 		console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					// 	},
					// 	fail: function(err) {
					// 		console.log(err.errMsg);
					// 	}
					// }
				});
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.buildings_list {
		padding: 30rpx;
		margin: 30rpx 20rpx 0;
		border-radius: 20rpx;
		box-shadow: 0 0 8px rgba(0,0,0,.1);

		.title {
			font-size: 35rpx;
			font-weight: 600;
			margin-bottom: 15rpx;
		}
	}

	.buildings_imgs {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

	}

	.buildings_img {
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: space-between;
		text-align: center;
		width: calc(25% - 16rpx);
		height: 150rpx;
		// margin-right:20rpx;
		margin: 20rpx 20rpx 0 0;
		overflow: hidden;
		// border-radius: 25rpx;

		&:nth-child(4n) {
			margin-right: 0;
		}

		image {
			width: 100%;
			height: 120rpx;
		}

		// view {
		// 	width: 100%;
		// 	font-size: 24rpx;
		// 	margin-top: 10rpx;
		// 	white-space: nowrap;
		// 	overflow: hidden;
		// 	text-overflow: ellipsis;
		// }
	}
</style>